import { addForums, deleteForums, getForums, updateForums, uploadForums } from '@/api/forums/content';
import CommonTable from '@/components/Table';
import React, { useRef, useState } from 'react';
import SearchBar from './Search';
import { Button, Drawer, Tag } from 'antd';
import { TagsItem } from '@/api/tags';
import { ColumnType } from 'antd/es/table';
import AddForm from './AddForm';
import EditForm from './EditForm';
import { CategoriesItem } from '@/api/written/categories';
import MarkDownComponent from '@/components/markdown';

const defaultColumn: ColumnType<CategoriesItem>[] = [
  {
    title: '标题',
    key: 'title',
    dataIndex: 'title'
  },
  {
    title: '分类',
    key: 'categories',
    dataIndex: 'categories',
    render: (text) => <Tag>{text}</Tag>
  },
  {
    title: '内容',
    key: 'content',
    dataIndex: 'content'
  },
  {
    title: '用户ID',
    key: 'userID',
    dataIndex: 'userID'
  }
];

export default function PostsManagement() {
  const [tagsData, setTagsData] = useState<CategoriesItem[]>([]);
  const [recorde, setRecord] = useState<CategoriesItem>();
  const [content, setContent] = useState('');
  const [visible, setVisible] = useState(false);
  const formRef = useRef();
  const handleChange = (data: CategoriesItem[]) => setTagsData(data);
  const handleRecordChange = (data: CategoriesItem, form: any) => {
    setRecord(data);
    formRef.current = form;
  };
  const index = defaultColumn.findIndex((it) => it.dataIndex === 'content');
  const tableCloumns = defaultColumn.slice();
  tableCloumns[index].render = (text) => (
    <Button
      type="link"
      onClick={() => {
        setContent(text);
        setVisible(true);
      }}
    >
      查看
    </Button>
  );

  return (
    <>
      <Drawer style={{ width: "500px" }} open={visible} onClose={() => setVisible(false)}>
        <MarkDownComponent text={content ?? ''} />
      </Drawer>
      <CommonTable
        title="帖子"
        deleteApi={deleteForums}
        getDataApi={getForums}
        updateDataApi={updateForums}
        uploadApi={uploadForums}
        addDataApi={addForums}
        columns={defaultColumn}
        onChange={handleChange}
        onRecordChange={handleRecordChange}
        // EditForm={<EditForm data={recorde} form={formRef.current} />}
        SerchBar={<SearchBar />}
      />
    </>
  );
}
